<!--
Date: 2025-08-13
Copyright (c) 2025 Industrial Software Feature Database
-->
<template>
  <div class="public_main">
    <div class="left_tree">
      <el-tree :data="treeData" default-expand-all @node-click="treeSelect" :expand-on-click-node="false" />
    </div>
    <div class="right_table">
      <div class="query">
        <el-form inline ref="queryFormRef" :model="queryParams" label-width="100px" size="small">
          <el-form-item label="文件名:">
            <el-input v-model="queryParams.resultName" placeholder="请输入文件名" />
          </el-form-item>
          <el-form-item label="上传时间:">
            <el-date-picker
              v-model="dateRangeCreateTime"
              value-format="YYYY-MM-DD"
              type="datetimerange"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item class="query_btns">
            <el-button size="small" type="primary" icon="search" @click="doQuery">查询</el-button>
            <el-button size="small" type="default" icon="refresh" @click="doReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="table_div">
        <el-button size="small" type="primary" class="upload_btn" plain icon="Upload" @click="handleVisible('add')">上传文件</el-button>
        <el-table :data="tableData" v-loading="loading">
          <el-table-column label="文件名" align="left" prop="name" fixed="left" width="200"> </el-table-column>
          <el-table-column label="分类" align="left" prop="type" width="400"> </el-table-column>
          <el-table-column label="上传者" align="left" prop="createByName"> </el-table-column>
          <el-table-column label="上传时间" align="left" prop="createTime" width="200"> </el-table-column>
          <el-table-column label="操作"  width="210" fixed="right">
            <template #default="scope">
              <el-tooltip content="修改" placement="top">
                <el-button size="small" link type="primary" icon="Edit" @click="handleVisible('edit', scope.row)">修改</el-button>
              </el-tooltip>
              <el-tooltip content="下载" placement="top">
                <el-button size="small" link type="primary" icon="Download" @click="handleDownload(scope.row)">下载</el-button>
              </el-tooltip>
              <el-tooltip content="删除" placement="top">
                <el-button size="small" link type="primary" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagenation">
          <!-- <el-pagination
            v-show="total > 0"
            layout="prev, pager, next,jumper"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            :total="total"
            @pagination="handleCurrentChange"
          /> -->
          <pagination
            v-show="total > 0"
            style="margin-top: 0;"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            :total="total"
            :background="false"
            layout="total, sizes, prev, pager, next, jumper"
            @pagination="handleCurrentChange"
          />
        </div>
      </div>
    </div>
    <UploadOp2 :operateType="operateType" :uploadOp2Visible="uploadOp2Visible" :rowData="currentRow" @close="handleClose" v-if="uploadOp2Visible" />
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { treeData } from '../resultLibrary.js';
import { getOp2Public, deleteResult } from '@/api/resultLibrary';
import UploadOp2 from './UploadOp2.vue';
const { proxy } = getCurrentInstance();
const tableData = ref([]);
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  resultName: '',
  createTime: '',
  orderByColumn: 'createTime',
  isAsc: 'descending'
});
const total = ref(0);
const uploadOp2Visible = ref(false);
const currentRow = ref(null);
const resultList = ref([]);
const dateRangeCreateTime = ref(['', '']);
const loading = ref(false);
const operateType = ref('');
const handleCurrentChange = (number) => {
  // queryParams.value.pageNum = number;
  doQuery();
};
//查询数据列表
const doQuery = () => {
  loading.value = true;
  tableData.value = [];
  proxy?.addDateRange(queryParams.value, dateRangeCreateTime.value, 'CreateTime');
  getOp2Public(queryParams.value)
    .then((res) => {
      // 处理数据
      loading.value = false;
      total.value= res?.total
      if (res?.rows) {
        resultList.value = res?.rows;
        res?.rows.map((el) => {
          let type = '';
          if (el.resultScope) {
            type = `${el.applicableResult} / ${el.resultSeries} / ${el.loadConditions} / ${el.resultScope}`;
          } else {
            type = `${el.applicableResult} / ${el.resultSeries} / ${el.loadConditions}`;
          }
          const index = el.resultName.indexOf('.');
          const name = index > 0 ? el.resultName.slice(0, index) : el.resultName;
          el.type = type;
          el.name = name;
          tableData.value.push(el);
        });
      }
    })
    .catch(() => {
      loading.value = false;
    });
};
const checkDataType = (data) => {
  if (Array.isArray(data)) {
    return 'array';
  } else if (typeof data === 'object') {
    return 'object';
  }
};
const treeSelectNode = ref([]);
const findLabel = (data) => {
  if (data.parent && checkDataType(data.parent.data) === 'object') {
    findLabel(data.parent);
  }
  treeSelectNode.value.push(data.data.label);
};
// 左侧树点击事件
const treeSelect = (selected, TreeNode) => {
  treeSelectNode.value = [];
  findLabel(TreeNode);
  queryParams.value.applicableResult = treeSelectNode.value[0];
  queryParams.value.resultSeries = treeSelectNode.value[1];
  queryParams.value.loadConditions = treeSelectNode.value[2];
  queryParams.value.resultScope = treeSelectNode.value[3];
  doQuery();
};
const doReset = () => {
  dateRangeCreateTime.value = ['', ''];
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
    resultName: '',
    orderByColumn: 'createTime',
    isAsc: 'descending'
  };
  dateRangeCreateTime.value = ['', ''];
  doQuery();
};
// 打开弹窗方法
const handleVisible = (param, data) => {
  if (param != 'add') {
    const valueData = resultList.value.filter((el) => {
      return el.resultId === data.resultId;
    });
    currentRow.value = valueData[0];
  }

  switch (param) {
    case 'add': {
      currentRow.value = null;
      operateType.value = 'ADD';
      uploadOp2Visible.value = true;
      break;
    }
    case 'edit': {
      operateType.value = 'EDIT';
      uploadOp2Visible.value = true;
      break;
    }
  }
};
// 关闭弹窗
const handleClose = (param) => {
  const { type, data } = param;
  switch (type) {
    case 'add': {
      if (data?.type === 'refesh') {
        doQuery();
      }
      uploadOp2Visible.value = false;
      break;
    }
  }
};
//删除
const handleDelete = async (row) => {
  await proxy?.$modal.confirm('是否确认删除该数据项?');
  deleteResult(row).then((res) => {
    if (res?.code === 200) {
      proxy?.$modal.msgSuccess('删除成功');
      doQuery();
    }
  });
};
/** 下载按钮操作 */
const handleDownload = (row) => {
  proxy?.$download.oss(row.resultId, '/result/download/');
};
onMounted(() => {
  doQuery();
});
</script>
<style lang="scss" scoped>
.public_main {
  display: flex;
  .left_tree {
    width: 230px;
    overflow: auto;
    height: calc(100vh - 155px);
  }
  .right_table {
    width: calc(100% - 230px);
    overflow: auto;
    height: calc(100vh - 155px);
    .query {
      border: 1px solid #dddddd7a;
      padding: 20px 10px 0 10px;
      .query_btns {
        padding-left: 100px;
      }
    }
    .table_div {
      margin-top: 10px;
      border: 1px solid #dddddd7a;
      padding-bottom: 10px;
      .upload_btn {
        margin: 10px 10px;
      }
      .pagenation {
        display: flex;
        justify-content: end;
        margin-top: 10px;
      }
    }
  }
  :deep(.el-form-item__content) {
    width: 220px;
  }
  :deep(.el-tree-node__label) {
    font-size: 12px;
    color: #606266;
  }
}
</style>
      